<template>
  <div class="login">
    <div class="box">
      <div class="center-box" style="width: 350px" v-show="false">
        <div class style="text-align: center">
          <img
            style="width: 80px; height: 80px"
            src="../../assets/logo.png"
            alt
          />
          <div style="font-size: 30px; margin-top: 10px"></div>
        </div>
        <a-form
          id="components-form-demo-normal-login"
          :form="form"
          class="login-form"
          @submit="handleSubmit"
        >
          <a-form-item>
            <a-input
              v-decorator="[
                'userName',
                { initialValue: formData.userName, rules: rules.userName },
              ]"
              @change="nameChange"
              placeholder="账号"
            >
              <a-icon
                slot="prefix"
                type="user"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              v-decorator="[
                'passWord',
                { initialValue: formData.passWord, rules: rules.passWord },
              ]"
              type="passWord"
              @change="passWordChange"
              placeholder="密码"
            >
              <a-icon
                slot="prefix"
                type="lock"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
          </a-form-item>
          <a-form-item>
            <!-- <a-checkbox
              v-decorator="['autoLogin',{valuePropName: 'checked',initialValue: true,},]"
            >自动登录</a-checkbox> -->
            <a-button
              type="primary"
              html-type="submit"
              class="login-form-button"
              :loading="loading"
              >登录</a-button
            >
          </a-form-item>
        </a-form>
      </div>
      <div class="center-box">
        <div class="left">
          <img src="../../assets/img/login/1.png" alt="" />
        </div>
        <div class="right">
          <div class="right-content">
            <div class="welcome-text">欢迎登陆</div>
            <div class="name-text">123</div>
            <div class="form-box">
              <a-form
                id="components-form-demo-normal-login"
                :form="form"
                class="login-form"
                @submit="handleSubmit"
              >
                <a-form-item>
                  <a-input
                    v-decorator="[
                      'userName',
                      {
                        initialValue: formData.userName,
                        rules: rules.userName,
                      },
                    ]"
                    @change="nameChange"
                    placeholder="用户账号"
                  >
                    <a-icon
                      slot="prefix"
                      type="user"
                      style="
                        color: rgba(0, 0, 0, 0.25);
                        margin-left: -12px;
                        font-size: 20px;
                      "
                    />
                  </a-input>
                </a-form-item>
                <a-form-item>
                  <a-input
                    v-decorator="[
                      'passWord',
                      {
                        initialValue: formData.passWord,
                        rules: rules.passWord,
                      },
                    ]"
                    type="passWord"
                    @change="passWordChange"
                    placeholder="用户密码"
                  >
                    <a-icon
                      slot="prefix"
                      type="lock"
                      style="
                        color: rgba(0, 0, 0, 0.25);
                        margin-left: -12px;
                        font-size: 20px;
                      "
                    />
                  </a-input>
                </a-form-item>
                <a-form-item>
                  <!-- <a-checkbox
              v-decorator="['autoLogin',{valuePropName: 'checked',initialValue: true,},]"
            >自动登录</a-checkbox> -->
                  <a-button
                    type="primary"
                    html-type="submit"
                    class="login-form-button"
                    :loading="loading"
                    >登录</a-button
                  >
                </a-form-item>
              </a-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "@/request/api";
import md5 from "js-md5";
export default {
  props: {},
  data() {
    return {
      loading: false,
      formData: {
        userName: "",
        passWord: "",
      },
      rules: {
        userName: [{ required: true, message: "请输入账号!" }],
        passWord: [{ required: true, message: "请输入密码" }],
      },
    };
  },
  components: {},
  created() {},
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "login" });
    console.log(this.form);
  },
  mounted() {},
  methods: {
    nameChange(e) {
      console.log(e);
      this.formData.userName = e.target.value;
    },
    passWordChange(e) {
      console.log(e);
      this.formData.passWord = e.target.value;
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("表单数据: ", values);
          // localStorage.setItem("autoLogin", values.autoLogin);
          this.login();
        }
      });
    },
    async login() {
      this.loading = true;
      let params = 'username=' + this.formData.userName + '&password=' + this.formData.passWord
      let { data } = await login(params);
      console.log(data);
      if (data.success) {
        this.$message.success("登录成功");
        localStorage.setItem('userInfo',JSON.stringify(data.content))
        let cookieList = []
        document.cookie.split(';').forEach(item=>{
            cookieList.push({
              value:item.split('=')[0],
              key:item.split('=')[1]
            })
        })
        cookieList.map(item=>{
          if(item.value.trim() == 'token'){
            localStorage.setItem("token", item.key);
          }
        })
        this.$router.push({path:'/home'})
        // this.$router.replace(
        //   this.$route.query.redirect ? this.$route.query.redirect : "/home"
        // );
      } else {
        this.$message.error(data.message);
      }
      this.loading = false;
    },
  },
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/base.less";
.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  #components-form-demo-normal-login .login-form {
    max-width: 300px;
  }
  #components-form-demo-normal-login .login-form-button {
    width: 100%;
    height:45px;
    margin-top:45px;
  }
  .center-box {
    width: 940px;
    height: 520px;
    box-shadow: 0px 7px 27px 0px rgba(19, 38, 154, 0.27);
    display: flex;
    border-radius: 12px;
    .left {
      width: 520px;
      border-radius: 12px 0px 0px 12px;
      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 12px 0px 0px 12px;
      }
    }
    .right {
      border-radius: 0px 12px 12px 0px;
      width: 420px;
      .right-content {
        margin: 71px 40px 88px;
        .welcome-text {
          margin-top: 71px;
          color: #3872ff;
          font-size: 26px;
          font-weight: 500;
        }
        .name-text {
          color: #fff;
          font-size: 20px;
          font-weight: 500;
          margin-top: 20px;
        }
        .form-box {
          margin-top: 40px;
        }
      }
    }
  }
}
/deep/ input {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background: #fff !important;
  box-shadow: none !important;
}
/deep/ input:-internal-autofill-selected {
  background: #fff !important;
}
/deep/ input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}

//为input设置透明色

/deep/ input {
  background-color: rgba(255, 255, 255, 0.6);
}
</style>